<template>
  <div class="goods">
    <!--1. 搜索区域 -->
    <div class="header">
      <!-- change	仅在输入框失去焦点或用户按下回车时触发 -->
      <el-input v-model="input" placeholder="请输入内容" @change="searchInp"></el-input>
      <el-button type="primary">查询</el-button>
      <el-button type="primary">
        <router-link to='/add-goods' style="color:#fff">页面添加</router-link>
      </el-button>
      <el-button type="primary" @click="addGoods">弹窗添加</el-button>

    </div>

    <!--2. 表格区域 展示视图数据 -->
    <div class="wrapper">
      <el-table :data="tableData" >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="商品ID"></el-table-column>
        <el-table-column prop="title" label="商品名称" show-overflow-tooltip>
          <!-- show-overflow-tooltip	当内容过长被隐藏时显示 tooltip -->
        </el-table-column>
        <el-table-column prop="price" label="商品价格"></el-table-column>
        <el-table-column prop="num" label="商品数量"></el-table-column>
        <el-table-column prop="category" label="规格类目"></el-table-column>
        <el-table-column prop="image" label="商品图片"></el-table-column>
        <el-table-column prop="sellPoint" label="商品卖点"></el-table-column>
        <el-table-column prop="desc" label="商品描述"></el-table-column>
        <el-table-column prop="address" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- 3.分页 -->

    <MyPagination :total="total" :pageSize="pageSize" @changePage="changePage"/>

    <!-- 4.显示弹框组件 -->
    <!-- 1.父传子的方法 2.ref可以获取子组件的实例 -->
<!--    <GoodsDialog :dialogVisible="dialogVisible" @changeDialog='changeDialog'/>-->
    <GoodsDialog ref="dialog" />

  </div>
</template>

<script>
import MyPagination from '../../components/MyPagination.vue' //引入分页组件
import GoodsDialog from './GoodsDialog.vue' //引入添加弹窗组件
export default {
  components: {
    MyPagination,
    GoodsDialog
  },
  data() {
    return {
      input: '',
      tableData: [],
      total: 10,
      pageSize: 1,
      type: 1,  //分页状态 1 获取全部数据的分页状态  2 搜索出来数据的分页状态
      list: [],
      dialogVisible: false
    }
  },
  methods: {

    //分页页码参数接收
    changePage(num) {
      if (this.type == 1){
        this.http(num); //商品列表分页
      }else{
         //搜索分页 12 list = [0,1,2,3,4,5,6,7,8]  0-3 3-6
        console.log("搜索的分页处理---",)
        //(num-1) * 3 num*3
         this.tableData = this.list.splice((num-1)*3,num*3);
      }

    },

    //商品列表获取
    http(page) {
      this.$api.getGoodsList({
        page,
      }).then(res => {
        console.log(res.data.data)
        if (res.data.status == 200) {
          this.tableData = res.data.data; //数据列表
          this.total = res.data.total;
          this.pageSize = res.data.pageSize;
        }
      })
    },

    //编辑操作
    handleEdit() {

    },
    //删除操作
    handleDelete() {

    },


    //搜索查询数据
    searchInp(val) {
      console.log(val)
      if(!val){
        this.http(1);
        return;
      }

      this.$api.getSearch({
        search: val
      }).then(res => {
        console.log(res.data)
        if (res.data.status === 200) {
          this.list = res.data.data; //获取的搜索总数据条数---数据分割
          //假设需要分页 -- 我们处理分页
          this.total = res.data.data.length;
          this.pageSize = 3;
          this.tableData = res.data.data.slice(0, 3);
          this.type = 2;
        } else {
          this.tableData = [];
          this.total = 1;
          this.pageSize = 1;
          this.type = 1;
        }
      })
    },

    //添加商品 -- 出现弹框
    addGoods() {
      // this.dialogVisible = true
      //修改子组件的一个实例变量数据
      this.$refs.dialog.dialogVisible = true
    },
    changeDialog() {
      this.dialogVisible = false
    }

  },
  //生命周期函数
  created() {
    this.http(1)

  }
}
</script>

<style lang="less" scoped>
.goods {
  margin: 20px;
}

.header {
  display: flex;

  button {
    margin-left: 20px;
  }
}

.wrapper {
  margin: 20px 0;
}
</style>
